<template>
	<view class="order-details">
		<view v-if="orderInfo.shippingType == 3 && status.type != 0" class="map_box">
			<!-- show-location: 显示带有方向的当前定位点 -->
			<map id="map" :longitude="mapData.longitude" :latitude="mapData.latitude"
				:scale="mapData.scale" :polyline="mapData.polyline" :markers="mapData.markers"></map>
		</view>
		<!-- 给header上与data上加on为退款订单-->
		<view class="header bg-color-red acea-row row-middle" :class="refundOrder ? 'on' : ''">
			<view class="data" :class="refundOrder ? 'on' : ''">
				<view class="state">{{ orderInfo._status._msg }}</view>
				<view>{{ orderInfo.createTime }}</view>
			</view>
		</view>
		<template v-if="!refundOrder">
			<view class="nav">
				<view v-if="orderInfo.shippingType == 1 || orderInfo.shippingType == 2"
					class="navCon acea-row row-between-wrapper">
					<view :class="{ on: status.type === 0 || status.type === 9 }">待付款</view>
					<view :class="{ on: status.type === 11 }" v-if="orderInfo.shippingType === 2">待核销</view>
					<view :class="{ on: status.type === 1 }" v-else>待发货</view>
					<view :class="{ on: status.type === 2 }"
						v-if="orderInfo.shippingType === 1 || orderInfo.shippingType === 3">待收货</view>
					<view :class="{ on: status.type === 3 }">待评价</view>
					<view :class="{ on: status.type === 4 }">已完成</view>
				</view>

				<view class="progress acea-row row-between-wrapper"
					v-if="orderInfo.shippingType == 1 || orderInfo.shippingType == 2">
					<view class="iconfont" :class="[
              status.type === 0 || status.type === 9
                ? 'icon-webicon318'
                : 'icon-yuandianxiao',
              status.type >= 0 ? 'font-color-red' : ''
            ]"></view>
					<view class="line" :class="{ 'bg-color-red': status.type > 0 && status.type != 9 }"></view>
					<view class="iconfont" :class="[
              status.type === 1 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 1 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"></view>
					<view class="line" :class="{'bg-color-red':status.type > 1 && status.type != 6 && status.type != 9}"
						v-if="orderInfo.shippingType === 1 || orderInfo.shippingType === 3"></view>
					<view class="iconfont"
						:class="[status.type === 2 ? 'icon-webicon318' : 'icon-yuandianxiao',status.type >= 2 && status.type != 6 && status.type != 9? 'font-color-red': '']"
						v-if="orderInfo.shippingType === 1 || orderInfo.shippingType === 3"></view>
					<view class="line" :class="{
              'bg-color-red':
                status.type > 2 && status.type != 6 && status.type != 9
            }"></view>
					<view class="iconfont" :class="[
              status.type === 3 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 3 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"></view>
					<view class="line" :class="{
              'bg-color-red':
                status.type > 3 && status.type != 6 && status.type != 9
            }"></view>
					<view class="iconfont" :class="[
              status.type == 4 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 4 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"></view>
				</view>

				<!-- 本地生活配送 -->
				<view v-if="orderInfo.shippingType == 3" class="navCon acea-row row-between-wrapper">
					<view :class="{ on: status.type === 0 }">未支付</view>
					<view :class="{ on: status.type === 5 }">待接单</view>
					<view :class="{ on: status.type === 6 }">备货中</view>
					<view :class="{ on: status.type === 7 }">待取货</view>
					<view :class="{ on: status.type === 8 }">取货中</view>
					<view :class="{ on: status.type === 9 }">配送中</view>
					<view :class="{ on: status.type === 3 || status.type === 4 }">已完成</view>
				</view>



			</view>
			
			
			
			
			<!-- 本地生活配送骑手信息 -->
			<!-- v-if="orderInfo.shippingType == 3 && (status.type === 7 || status.type === 8 || status.type === 9 || status.type === 4)" -->
			<view v-if="orderInfo.shippingType == 3 && (status.type === 7 || status.type === 8 || status.type === 9 || status.type === 4)" class="wrapper" style="margin-bottom: 12rpx;">
				<view class="item acea-row row-between">
					<view>骑手姓名：</view>
					<view class="conter">{{ orderStatusClientExample.transporterName }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>骑手电话：</view>
					<view class="conter acea-row row-middle row-right">
						<text>{{ orderStatusClientExample.transporterPhone }}</text>
						<text @click="telPhone(orderStatusClientExample.transporterPhone)" class="iconfont icon-tonghua font-color-red"></text>
					</view>
				</view>
				<view class="item acea-row row-between">
					<view>接单时间：</view>
					<view class="conter">{{ orderStatusClientExample.acceptTime ? orderStatusClientExample.acceptTime : '-' }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>送达时间：</view>
					<view class="conter">{{ orderStatusClientExample.finishTime ? orderStatusClientExample.finishTime : '-' }}</view>
				</view>
			</view>






			<div class="writeOff" v-if="orderInfo.shippingType === 2 && orderInfo.paid === 1">
				<div class="title">核销信息</div>
				<div class="grayBg">
					<div class="pictrue">
						<img :src="orderInfo.code" />
					</div>
				</div>
				<div class="gear">
					<img src="https://qny.yijiumy.com/writeOff.jpg" />
				</div>
				<div class="num">{{ orderInfo.verifyCode }}</div>
				<div class="rules">
					<div class="item">
						<div class="rulesTitle acea-row row-middle">
							<span class="iconfont icon-shijian"></span>核销时间
						</div>
						<div class="info">
							每日：
							<span class="time">{{ system_store.dayTime }}</span>
						</div>
					</div>
					<div class="item">
						<div class="rulesTitle acea-row row-middle">
							<span class="iconfont icon-shuoming1"></span>使用说明
						</div>
						<div class="info">可将二维码出示给店员扫描或提供数字核销码</div>
					</div>
				</div>
			</div>
			<div class="map acea-row row-between-wrapper" v-if="orderInfo.shippingType === 2 && orderInfo.paid === 1">
				<div>自提地址信息</div>
				<div class="place cart-color acea-row row-center-wrapper" @click="Navigation()">
					<span class="iconfont icon-weizhi"></span>查看位置
				</div>
			</div>
			<view class="address" v-if="orderInfo.shippingType === 1 || orderInfo.shippingType === 3">
				<view class="name">
					{{ orderInfo.realName }}
					<text class="phone">{{ orderInfo.userPhone }}</text>
					<text @click="telPhone(orderInfo.userPhone)" class="iconfont icon-tonghua font-color-red"></text>
				</view>
				<view>{{ orderInfo.userAddress }}</view>
			</view>
			<div class="address" v-else>
				<div class="name">
					{{ system_store.name}}
					<span class="phone">{{ system_store.phone }}</span>
					<span @click="telPhone(system_store.phone)" class="iconfont icon-tonghua font-color-red"
						:href="'tel:' + system_store.phone"></span>
				</div>
				<!-- 直营返回的对象中地址字段：address 商家门店返回的对象中地址是：detailedAddress -->
				<div>{{ system_store.address || system_store.detailedAddress }}</div>
			</div>
			<view class="line" v-if="orderInfo.shippingType === 1 || orderInfo.shippingType === 3">
				<image src="https://qny.yijiumy.com/line.jpg" />
			</view>
		</template>
		<OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []"></OrderGoods>
		<view class="wrapper">
			<view class="item acea-row row-between">
				<view>订单编号：</view>
				<view class="conter acea-row row-middle row-right">
					{{ orderInfo.orderId }}
					<text class="copy copy-data" @click="copyClipboard(orderInfo.orderId)">复制</text>
				</view>
			</view>
			<view class="item acea-row row-between">
				<view>下单时间：</view>
				<view class="conter">{{ orderInfo.createTime }}</view>
			</view>
			<view class="item acea-row row-between">
				<view>订单类型：</view>
				<view class="conter">{{ orderTypeName }}</view>
			</view>
			<view class="item acea-row row-between">
				<view>支付状态：</view>
				<view class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</view>
			</view>
			<view class="item acea-row row-between">
				<view>支付方式：</view>
				<view class="conter">{{ orderInfo._status._payType }}</view>
			</view>
			<view class="item acea-row row-between" v-if="orderInfo.mark">
				<view>买家留言：</view>
				<view class="conter">{{ orderInfo.mark }}</view>
			</view>
		</view>

		<view v-if="orderInfo.status != 0 && orderInfo.shippingType == 1">
			<view class="wrapper" v-if="orderInfo.deliveryType === 'express'">
				<view class="item acea-row row-between">
					<view>配送方式：</view>
					<view class="conter">物流</view>
				</view>
				<view class="item acea-row row-between">
					<view>快递公司：</view>
					<view class="conter">{{ orderInfo.deliveryName || "" }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>快递号：</view>
					<view class="conter">{{ orderInfo.deliveryId || "" }}</view>
				</view>
			</view>
			<view class="wrapper" v-if="orderInfo.status != 0 && orderInfo.shippingType == 2">
				<view class="item acea-row row-between">
					<view>配送方式：</view>
					<view class="conter">自提</view>
				</view>
			</view>
			<view class="wrapper" v-if="orderInfo.status != 0 && orderInfo.shippingType == 3">
				<view class="item acea-row row-between">
					<view>配送方式：</view>
					<view class="conter">本地配送</view>
				</view>
			</view>
		</view>
		<!--     退款订单详情 -->
		<view class="wrapper" v-if="refundOrder">
			<view class="item acea-row row-between">
				<view>收货人：</view>
				<view class="conter">{{ orderInfo.realName }}</view>
			</view>
			<view class="item acea-row row-between">
				<view>联系电话：</view>
				<view class="conter">{{ orderInfo.userPhone }}</view>
			</view>
			<view class="item acea-row row-between">
				<view>收货地址：</view>
				<view class="conter">{{ orderInfo.userAddress }}</view>
			</view>
		</view>
		<view class="wrapper">
			<view class="item acea-row row-between">
				<view>支付金额：</view>
				<view class="conter">￥{{ orderInfo.totalPrice }}</view>
			</view>
			<view class="item acea-row row-between" v-if="orderInfo.couponPrice > 0">
				<view>优惠券抵扣：</view>
				<view class="conter">-￥{{ orderInfo.couponPrice }}</view>
			</view>
			<view class="item acea-row row-between" v-if="orderInfo.useIntegral > 0">
				<view>积分抵扣：</view>
				<view class="conter">-￥{{ orderInfo.deductionPrice }}</view>
			</view>
			<view class="item acea-row row-between" v-if="orderInfo.shippingType == 1 && orderInfo.payPostage > 0">
				<view>运费：</view>
				<view class="conter">￥{{ orderInfo.payPostage }}</view>
			</view>
			<view class="item acea-row row-between" v-if="orderInfo.shippingType == 3 && orderInfo.payPostage > 0">
				<view>配送费：</view>
				<view class="conter">￥{{ orderInfo.payPostage }}</view>
			</view>
			<view class="item acea-row row-between" v-if="orderInfo.shippingType == 1 && !orderInfo.merId && orderInfo.invoiceId">
				<view>发票费用：</view>
				<view class="conter">￥{{ orderInfo.serRatio }}</view>
			</view>
			<view class="item acea-row row-between" v-if="userInfo.isVip && orderInfo.discountAmount && !orderInfo.merId">
				<view>会员折扣：</view>
				<view class="conter">-￥{{ orderInfo.discountAmount }}</view>
			</view>
			<view class="actualPay acea-row row-right">
				实付款：
				<text class="money font-color-red">￥{{ orderInfo.payPrice }}</text>
			</view>
		</view>
		<view style="height:100rpx;" v-if="!refundOrder && offlineStatus"></view>
		<view class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus">
			<template v-if="status.type == 0">
				<view class="bnt cancel" @click="cancelOrder">取消订单</view>
				<view class="bnt bg-color-red" @click="pay = true">立即付款</view>
			</template>
			<!-- merId:0 平台直营商品 直营商品不能申请退款 -->
			<template v-if="status.type == 1 && orderInfo.merId">
				<view class="bnt cancel" @click="goGoodsReturn(orderInfo)">申请退款</view>
			</template>
			<!--  -->
			<template v-if="orderInfo.shippingType == 1 && status.type == 2">
				<view class="bnt default"
					@click="$yrouter.push({ path: '/userOrderPack/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})">查看物流
				</view>
				<view class="bnt bg-color-red" @click="takeOrder">确认收货</view>
			</template>
			<template v-if="orderInfo.shippingType == 1 && status.type == 3 && orderInfo.deliveryType == 'express'">
				<view class="bnt default"
					@click="$yrouter.push({ path: '/userOrderPack/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})">查看物流
				</view>
			</template>
			<template v-if="orderInfo.shippingType == 1 && status.type == 4">
				<view class="bnt cancel" @click="delOrder">删除订单</view>
				<view class="bnt default" @click="
        $yrouter.push({ path: '/userOrderPack/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
        ">查看物流</view>
			</template>
			<!-- 本地配送 -->
			<template v-if="orderInfo.shippingType == 3 && status.type == 4">
				<view class="bnt cancel" @click="delOrder">删除订单</view>
				<!-- 退款 -->
			</template>
			<!-- status.type 源系统是处理拼团逻辑 -->
			<!-- <template v-if="status.type == 6">
				<view class="bnt bg-color-red" @click="goGroupRule(orderInfo)">查看拼团</view>
			</template> -->
		</view>
		<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
		<view class="geoPage" v-if="mapShow">
			<iframe width="100%" height="100%" frameborder="0" scrolling="no"
				:src="'https://apis.map.qq.com/uri/v1/geocoder?coord=' + system_store.latitude + ',' +system_store.longitude +'&referer=' +mapKey"></iframe>
		</view>
	</view>
</template>

<script>
	import OrderGoods from "@/components/OrderGoods";
	import {
		orderDetail
	} from "@/api/order";
	import Payment from "@/components/Payment";
	import {
		isWeixin,
		copyClipboard
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import {
		cancelOrderHandle,
		takeOrderHandle,
		delOrderHandle,
		payOrderHandle,
	} from "@/libs/order";
	// import { wechatEvevt } from "@/libs/wechat";
	import {
	  goToHear
	} from "@/utils/openLocation.js";

	const NAME = "OrderDetails";

	export default {
		name: NAME,
		components: {
			OrderGoods,
			Payment,
		},
		data: function() {
			return {
				offlinePayStatus: 2,
				orderTypeName: "普通订单",
				orderTypeNameStatus: true,
				offlineStatus: true,
				id: "",
				orderInfo: {
					_status: {},
				},
				status: {},
				pay: false,
				payType: ["yue", "weixin"],
				from: this.$deviceType,
				system_store: {},
				mapKay: "",
				mapShow: false,
				
				mapData: {
					longitude: '113.75179',
					latitude: '23.02067',
					polyline: [],
					distance: 0,
					markers: [],
					scale: 12
				},
				statusInfo: {
					5: `商家待接单`,
					6: `商家备货中`,
					7: `待骑手取货`,
					8: `骑手取货中`,
					9: `骑手配送中`,
					3: `已完成`,
					4: `已完成`
				},
				// 根据状态返回
				deliverymanInfo: {
					7: `正在赶往商家`,
					8: `正在取货`,
					9: `配送中`
				},
				// 配送信息
				orderStatusClientExample: {
					transporterName: '', // 骑手姓名
					transporterPhone: '', // 骑手电话
					transporterLng: '', // 骑手经度
					transporterLat: '', // 骑手维度
					distance: '', // 配送距离
					acceptTime: '', // 接单时间
					fetchTime: '', // 取货时间
					finishTime: '', // 送达时间
					cancelTime: '' // 取消时间
				}
			};
		},
		computed: {
			refundOrder() {
				return this.orderInfo.refund_status > 0;
			},
			...mapGetters(["userInfo"]),
		},
		onShow() {
			this.id = this.$yroute.query.id;
			this.getDetail();
		},
		mounted: function() {
			this.id = this.$yroute.query.id;
			// this.getDetail();
		},
		methods: {
			Navigation() {
				let obj = {}
				if (!this.orderInfo.merId) {
					obj = this.orderInfo.systemStore
				} else {
					obj = this.orderInfo.merchantStore
				}
				goToHear(obj.latitude, obj.longitude)
			},
			// 处理本地配送地图卡片业务逻辑
			initMap() {
				let _markers = []
				
				this.mapData.latitude = this.orderInfo.latitude
				this.mapData.longitude = this.orderInfo.longitude
				
				// 商家门店位置
				_markers.push({
					id: 0,
					latitude: this.orderInfo.latitude,
					longitude: this.orderInfo.longitude,
					iconPath: 'https://qny.yijiumy.com/ydd/tmp/shop.png',
					width: 29,
					height: 29,
					callout: {
						content: this.statusInfo[this.status.type],
						borderRadius: 2,
						borderWidth: 1,
						fontSize: 11,
						padding: 4,
						borderColor: '#ffffff',
						bgColor: '#ffffff',
						display: 'ALWAYS',
						textAlign: 'center'
					}
				})
				console.log(">>>>")
				// 订单状态为待取货时，证明骑手已经接单，这时候有骑手信息，将信息渲染到地图上
				if (this.status.type === 7 || this.status.type === 8 || this.status.type === 9) {
					this.orderStatusClientExample = this.orderInfo.orderStatusClientExample || {}
					_markers.push({
						id: 1,
						latitude: this.orderStatusClientExample.transporterLat,
						longitude: this.orderStatusClientExample.transporterLng,
						iconPath: 'https://qny.yijiumy.com/ydd/tmp/324fg324regdf.png',
						width: 29,
						height: 29,
						callout: {
							content: `${this.deliverymanInfo[this.status.type]}`,
							borderRadius: 2,
							borderWidth: 1,
							fontSize: 11,
							padding: 4,
							borderColor: '#ffffff',
							bgColor: '#ffffff',
							display: 'ALWAYS',
							textAlign: 'center'
						}
					})
				}
				
				
				
				this.mapData.markers = _markers
			},
			
			
			
			copyClipboard,
			goGoodsReturn(orderInfo) {
				this.$yrouter.push({
					path: "/userOrderPack/pages/order/GoodsReturn/index",
					query: {
						id: orderInfo.orderId,
					},
				});
			},
			goGroupRule(orderInfo) {
				this.$yrouter.push({
					path: "/activityPack/pages/activity/GroupRule/index",
					query: {
						id: orderInfo.pinkId,
					},
				});
			},
			//拨打电话
			telPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					fail() {
						console.log("取消拨打");
					}
				});
			},
			// showChang: function(data) {
			// 	console.log(data)
			// 	// 这里判断是不是微信小程序
			// 	this.$yrouter.push({
			// 		path: "/pages/map/index",
			// 		query: data,
			// 	});
			// 	// if (isWeixin()) {
			// 	//   let config = {
			// 	//     latitude: this.system_store.latitude,
			// 	//     longitude: this.system_store.longitude,
			// 	//     name: this.system_store.name,
			// 	//     address: this.system_store.address
			// 	//   };
			// 	// } else {
			// 	//   if (!this.mapKey)
			// 	//     uni.showToast({
			// 	//       title: "暂无法使用查看地图，请配置您的腾讯地图key",
			// 	//       icon: "none",
			// 	//       duration: 2000
			// 	//     });
			// 	//   return;
			// 	//   this.mapShow = true;
			// 	// }
			// },
			goBack() {
				if (this.name === "MyOrder") {
					this.$yrouter.back();
					return;
				} else {
					console.log(this);
					this.$yrouter.replace({
						path: "/userOrderPack/pages/order/MyOrder/index",
					});
					return;
				}
			},
			cancelOrder() {
				cancelOrderHandle(this.orderInfo.orderId)
					.then(() => {
						setTimeout(() => this.goBack(), 300);
					})
					.catch(() => {
						this.getDetail();
					});
			},
			takeOrder() {
				takeOrderHandle(this.orderInfo.orderId).finally(() => {
					this.getDetail();
				});
			},
			delOrder() {
				delOrderHandle(this.orderInfo.orderId).then(() => {
					setTimeout(() => this.goBack(), 300);
				});
			},
			setOfflinePayStatus: function(status) {
				var that = this;
				that.offlinePayStatus = status;
				if (status === 1 && that.orderTypeNameStatus === true) {
					that.payType.push("offline");
				}
			},
			getOrderStatus: function() {
				let orderInfo = this.orderInfo || {},
					_status = orderInfo._status || {
						_type: 0
					},
					status = {};
				let type = parseInt(_status._type),
					delivery_type = orderInfo.deliveryType,
					seckill_id = orderInfo.seckillId ? parseInt(orderInfo.seckillId) : 0,
					bargain_id = orderInfo.bargainId ? parseInt(orderInfo.bargainId) : 0,
					combination_id = orderInfo.combinationId ?
					parseInt(orderInfo.combinationId) :
					0;
				status = {
					type: type,
					class_status: 0,
				};
				if (type == 1 && combination_id > 0) {
					status.type = 6;
					status.class_status = 1;
				} //查看拼团
				if (type == 2 && delivery_type == "express") status.class_status = 2; //查看物流
				if (type == 2) status.class_status = 3; //确认收货
				if (type == 4 || type === 0) status.class_status = 4; //删除订单
				if (
					!seckill_id &&
					!bargain_id &&
					!combination_id &&
					(type == 3 || type == 4)
				)
					status.class_status = 5; //再次购买
				if (type == 9) {
					//线下付款
					status.class_status = 0;
					this.offlineStatus = false;
				}
				this.status = status;
			},
			getDetail() {
				const id = this.id;
				if (!id) {
					uni.showToast({
						title: "订单不存在",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				orderDetail(id)
					.then((res) => {
						this.orderInfo = res.data;
						console.log(this.orderInfo)
						this.getOrderStatus();
						if (this.orderInfo.combinationId > 0) {
							this.orderTypeName = "拼团订单";
							this.orderTypeNameStatus = false;
						} else if (this.orderInfo.bargainId > 0) {
							this.orderTypeName = "砍价订单";
							this.orderTypeNameStatus = false;
						} else if (this.orderInfo.seckillId > 0) {
							this.orderTypeName = "秒杀订单";
							this.orderTypeNameStatus = false;
						}
						// 判断是直营门店还是商家门店，分别取不同字段展示
						if (!this.orderInfo.merId) {
							this.system_store = res.data.systemStore || {};
						} else {
							this.system_store = res.data.merchantStore || {};
						}
						
						this.mapKey = res.data.mapKay;
						this.setOfflinePayStatus(this.orderInfo.offlinePayStatus);
						
						// 骑手配送信息
						if (this.orderInfo.orderStatusClientExample) this.orderStatusClientExample = this.orderInfo.orderStatusClientExample
						
						// 初始化配送地图组件
						if(this.orderInfo.shippingType == 3 && this.status.type != 0) this.initMap()
					})
					.catch((err) => {
						uni.showToast({
							title: err.response.data.msg,
							icon: "none",
							duration: 2000,
						});
					});
			},
			async toPay(type) {
				var that = this;
				console.log(type, "支付方式");
				await payOrderHandle(this.orderInfo.orderId, type, that.from);
				that.getDetail();
			},
		},
	};
</script>

<style scoped lang="less">
	.geoPage {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 10000;
	}

	.order-details .writeOff {
		background-color: #fff;
		margin-top: 0.13 * 100rpx;
		padding-bottom: 0.3 * 100rpx;
	}

	.order-details .writeOff .title {
		font-size: 0.3 * 100rpx;
		color: #282828;
		height: 0.87 * 100rpx;
		border-bottom: 1px solid #f0f0f0;
		padding: 0 0.3 * 100rpx;
		line-height: 0.87 * 100rpx;
	}

	.order-details .writeOff .grayBg {
		background-color: #f2f5f7;
		width: 5.9 * 100rpx;
		height: 3.84 * 100rpx;
		border-radius: 0.2 * 100rpx 0.2 * 100rpx 0 0;
		margin: 0.5 * 100rpx auto 0 auto;
		padding-top: 0.55 * 100rpx;
	}

	.order-details .writeOff .grayBg .pictrue {
		width: 2.9 * 100rpx;
		height: 2.9 * 100rpx;
		margin: 0 auto;
	}

	.order-details .writeOff .grayBg .pictrue img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .writeOff .gear {
		width: 5.9 * 100rpx;
		height: 0.3 * 100rpx;
		margin: 0 auto;
	}

	.order-details .writeOff .gear img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .writeOff .num {
		background-color: #f0c34c;
		width: 5.9 * 100rpx;
		height: 0.84 * 100rpx;
		color: #282828;
		font-size: 0.48 * 100rpx;
		margin: 0 auto;
		border-radius: 0 0 0.2 * 100rpx 0.2 * 100rpx;
		text-align: center;
		padding-top: 0.04 * 100rpx;
	}

	.order-details .writeOff .rules {
		margin: 0.46 * 100rpx 0.3 * 100rpx 0 0.3 * 100rpx;
		border-top: 0.01 * 100rpx solid #f0f0f0;
		padding-top: 0.1 * 100rpx;
	}

	.order-details .writeOff .rules .item {
		margin-top: 0.15 * 100rpx;
	}

	.order-details .writeOff .rules .item .rulesTitle {
		font-size: 0.28 * 100rpx;
		color: #282828;
	}

	.order-details .writeOff .rules .item .rulesTitle .iconfont {
		font-size: 0.3 * 100rpx;
		color: #333;
		margin-right: 0.08 * 100rpx;
		margin-top: 0.05 * 100rpx;
	}

	.order-details .writeOff .rules .item .info {
		font-size: 0.28 * 100rpx;
		color: #999;
		margin-top: 0.05 * 100rpx;
	}

	.order-details .writeOff .rules .item .info .time {
		margin-left: 0.2 * 100rpx;
	}

	.order-details .map {
		height: 0.86 * 100rpx;
		font-size: 0.3 * 100rpx;
		color: #282828;
		line-height: 0.86 * 100rpx;
		border-bottom: 0.01 * 100rpx solid #f0f0f0;
		margin-top: 0.13 * 100rpx;
		background-color: #fff;
		padding: 0 0.3 * 100rpx;
	}

	.order-details .map .place {
		font-size: 0.26 * 100rpx;
		width: 1.76 * 100rpx;
		height: 0.5 * 100rpx;
		border-radius: 0.25 * 100rpx;
		line-height: 0.5 * 100rpx;
		text-align: center;
	}

	.order-details .map .place .iconfont {
		font-size: 0.27 * 100rpx;
		height: 0.27 * 100rpx;
		line-height: 0.27 * 100rpx;
		margin: 0.02 * 100rpx 0.03 * 100rpx 0 0;
	}

	.order-details .address .name .iconfont {
		font-size: 0.34 * 100rpx;
		margin-left: 0.1 * 100rpx;
	}
	.map_box {
		overflow: hidden;
		width: 100%;
		height: 400rpx;
	}
	#map {
		width: 100%;
		height: 460rpx;
	}
</style>